<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="/static/jQuery-3.3.1.js"></script>
    <style>
        #img_avatar {
            width: 50px;
            height: 50px;
        }

        #avatar {
            display: none;
        }
    </style>
</head>
<body>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-5 col-md-offset-3">
            <h1>注册</h1>
            <form action="{% url 'register' %}" method="post" class="get_froms">
                {% csrf_token %}
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input type="text" name="username" id="username" class="form-control">
                </div>
                <div class="form-group">
                    <label for="pwd">密码</label>
                    <input type="text" name="pwd" id="pwd" class="form-control">
                </div>
                <div class="form-group">
                    <label for="email">邮箱</label>
                    <input type="text" name="email" id="email" class="form-control">
                </div>
                <div class="form-group">
                    <label for="phone">电话</label>
                    <input type="text" name="phone" id="phone" class="form-control">
                </div>

                <div class="form-group">
                    <label for="avatar">头像
                        <img src="/static/image/default.png" alt="" id="img_avatar">
                    </label>
                    <input type="file" name="avatar" id="avatar">
                </div>

                <div class="form-group">
                    <button type="button" class="btn btn-info">提交</button>
                    <span id="error"></span>
                </div>
            </form>
        </div>
    </div>
</div>

</body>
<script>
    function clearerror() {
        setTimeout(function () {
            $("#error").html("")
        }, 2000)
    }

    $(".btn").on("click", function () {
        var forms = new FormData()
        {# 对象.serialize() #}
        var forms_serialize = $(".get_froms").serializeArray();
        console.log(forms_serialize)
        // 获取的类型为： [{…}, {…}, {…}, {…}, {…}]
        //jquery的循环，传参数，第一个参数是要循环的对象，第二个参数是一个匿名对象
        $.each(forms_serialize, function (key, items) {
            forms.append(items.name, items.value)
        })
        forms.append("avatar", $("#avatar")[0].files[0])

        $.ajax({
            url: "{% url 'register' %}",
            type: "post",
            processData: false,
            contentType: false,
            data: forms,
            success: function (data) {
                if (data.status == 100) {
                    location.href = data.url
                } else {
                    $("#error").html(data["msg"]);
                    clearerror();
                }
            }
        })
    })

    $("#avatar").on("change", function () {
        var get_pre_avatar = $("#avatar")[0].files[0]
        // js前端文件阅读器
        var filereader = new FileReader()
        // 将图片对象传到文件阅读器中
        filereader.readAsDataURL(get_pre_avatar)
        // 打开文件filereader.result
        // 直接将文件对象渲染到img标签上是不可行的，需要加载完成才能进行操作 .onload
        filereader.onload = function () {
            $("#img_avatar").attr("src", filereader.result)
        }
    })

    clearerror()
</script>
</html>